<script setup lang='ts'>
import {reactive, ref} from 'vue';
import {numberApi} from "@/api/controller";
import {ToastSuccess, Toastloading} from "@/utils/public";
import {ElMessageBox} from "element-plus";
import addUcertify from "./addUcertify.vue";
import addUserV from "./addUserV.vue";
import userpriceList from "./userpriceList.vue";
import updateSign from "./updateSign.vue";
import userWallet from "./userWallet.vue";
import updateRoomWealth from "./updateRoomWealth.vue";
import RoomAdminList from "./RoomAdminList.vue";
import updatePhone from "./updatePhone.vue";
import Pagination from "@/components/Pagination/index.vue";

const $emit = defineEmits(["updateList"]);
const addUcertifyRef = ref(),
  addUserVRef = ref(),
  updateRoomWealthRef = ref(),
  RoomAdminListRef = ref(),
  userpriceListRef = ref(),
  updateSignRef = ref(),
  userWalletRef = ref(),
  updatePhoneRef = ref();
const activeCertifyOptions = [
  {label: "港", value: 2},
  {label: "澳", value: 3},
  {label: "台", value: 4},
  {label: "大陆", value: 1},
  {label: "其它", value: 5},
];
const action = reactive({
  drawerDialog: false,
  title: ''
})
const rowForm = reactive({
  user_id: 0,
  active_certify: 0,
  my_reg_date: '',
  create_time: '',
})
const handleActive = () => {
  const {user_id} = rowForm
  addUcertifyRef.value.openDialog({
    user_id,
    Options: activeCertifyOptions,
  });
};
const setUserV = () => {
  addUserVRef.value.openDialog(rowForm);
};
const handleRoomWealth = () => {
  updateRoomWealthRef.value.openDialog(rowForm);
};
const handleRoomAdmin = () => {
  RoomAdminListRef.value.openDialog(rowForm);
};
const handleChangePhone = () => {
  updatePhoneRef.value.openDialog(rowForm);
};
const removeVerify = () => {
  const {user_id = 0} = rowForm;
  ElMessageBox.confirm("确定重置用户认证次数吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.verify({user_id});
      loading.close();
      updateList()
      ToastSuccess("操作成功!");
    })
    .catch(() => {
    });
};
const removeAuthentication = () => {
  const {user_id = 0} = rowForm;
  ElMessageBox.confirm("确定要移除用户的实名信息吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.clearUserAll({user_id});
      loading.close();
      updateList()
      ToastSuccess("操作成功!");
    })
    .catch(() => {
    });
};
const removeBank = () => {
  const {user_id = 0} = rowForm;
  ElMessageBox.confirm("确定要移除用户的银行卡信息吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.clearUserbankAll({user_id});
      loading.close();
      updateList()
      ToastSuccess("操作成功!");
    })
    .catch(() => {
    });
};
const removeCode = () => {
  const {user_id = 0} = rowForm;
  ElMessageBox.confirm("确定要重置用户获取验证码次数吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.smsCodeReset({user_id});
      loading.close();
      updateList()
      ToastSuccess("操作成功!");
    })
    .catch(() => {
    });
}
const removeGender = () => {
  const {user_id = 0} = rowForm;
  ElMessageBox.confirm("确定要重置用户性别吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const loading = Toastloading();
      await numberApi.genderReset({user_id});
      loading.close();
      updateList()
      ToastSuccess("操作成功!");
    })
    .catch(() => {
    });
}
const updateList = () => {
  $emit("updateList");
}
const showPictureWall = () => {
  userpriceListRef.value.openDialog(rowForm);
};
const showUserSign = () => {
  updateSignRef.value.openDialog(rowForm);
};
const handleFinance = () => {
  userWalletRef.value.openDialog(rowForm);
};
const openDialog = (row: any = {}) => {
  action.drawerDialog = true
  const {nickname = ''} = row
  action.title = `用户：${nickname}`
  Object.assign(rowForm, {
    ...row
  })
}

let dialogVisible = ref(false);
let regTime = ref("");
const updateRegtime = () => {
  dialogVisible.value = true;
  console.log(rowForm);
  regTime.value = rowForm.create_time;
}
const handleConfirm = async () => {
  rowForm.my_reg_date = regTime.value;
  numberApi.updateRegDate(rowForm).then((data: any) => {
    if (data.code == 20000) {
      ToastSuccess("修改成功!");
      dialogVisible.value = false;
      updateList();
    }
  })
}

const myBagVisiable = ref(false);
const myBagList = ref([]);
const listQuery = reactive({
  page: 1,
  limit: 10,
  user_id:0,
})
const myBagTotal = ref(0);
const myBagAll = ref(0);
const myBag = async () => {
  myBagVisiable.value = true;
  listQuery.user_id = rowForm.user_id;
  let list = await numberApi.myBag(listQuery)
  myBagList.value = list.data.data;
  myBagAll.value=list.data.all;
  myBagTotal.value = list.data.total;
}

defineExpose({
  openDialog
})
</script>

<template>
  <div>
    <el-drawer v-model="action.drawerDialog" :title="action.title" direction="rtl" class="drawerDialog">
      <el-row>
        <el-col :span="8" v-rule="'number_createactivecertify'" v-if="rowForm.active_certify == 0">
          <el-button type="primary" @click="handleActive">实名认证</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_removeactivecertify'" v-if="rowForm.active_certify == 1">
          <el-button type="primary" @click="removeAuthentication">解绑实名</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_setuserv'">
          <el-button type="primary" @click="setUserV">用户加v</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_showPictureWall'">
          <el-button type="primary" @click="showPictureWall">照片墙</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_showUserSign'">
          <el-button type="primary" @click="showUserSign">个性签名</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_userMoneyBag'">
          <el-button type="primary" @click="handleFinance">钱包</el-button>
        </el-col>
        <!--        <el-col :span="8" v-rule="'number_getRoomWealthToUser'">-->
        <!--          <el-button type="primary" @click="handleRoomWealth">房间流水</el-button>-->
        <!--        </el-col>-->
        <el-col :span="8" v-rule="'room_index'">
          <el-button type="primary" @click="handleRoomAdmin">房间管理</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_change_phone'">
          <el-button type="primary" @click="handleChangePhone">换绑手机号</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_resetTheCertification'">
          <el-button type="primary" @click="removeVerify">重置认证次数</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_removebank'">
          <el-button type="primary" @click="removeBank">解绑银行卡</el-button>
        </el-col>
        <el-col :span="8" v-rule="'number_removecode'">
          <el-button type="primary" @click="removeCode">验证码重置</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="updateRegtime">修改注册时间</el-button>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="myBag">背包礼物</el-button>
        </el-col>
        <!-- <el-col :span="8" v-rule="'number_removegender'">
          <el-button type="primary"
            @click="removeGender">重置性别</el-button>
        </el-col> -->
      </el-row>
    </el-drawer>
    <addUcertify ref="addUcertifyRef" @updateList="updateList"/>
    <addUserV ref="addUserVRef" @updateList="updateList"/>
    <updateRoomWealth ref="updateRoomWealthRef"/>
    <RoomAdminList ref="RoomAdminListRef"/>
    <userpriceList ref="userpriceListRef" @updateList="updateList"/>
    <updateSign ref="updateSignRef"/>
    <userWallet ref="userWalletRef"/>
    <updatePhone ref="updatePhoneRef" @updateList="updateList"/>
    <el-dialog v-model="dialogVisible" title="修改注册时间" width="400px">
      <el-form>
        <el-form-item>
          <el-date-picker v-model="regTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期"
                          style="width: 100%"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="myBagVisiable"
               top="10vh"
               class="xm-dialog input-width"
               :close-on-click-modal="myBagVisiable"
               :close-on-press-escape="myBagVisiable"
               title="个人背包明细"
               width="60%"
    >
      <div>
        个人背包总价值：{{myBagAll}}
      </div>
      <el-table :data="myBagList" style="height:60vh">
        <el-table-column prop="name" label="礼物名称" width="180"></el-table-column>
        <el-table-column prop="gift_id" label="礼物ID" width="180"></el-table-column>
        <el-table-column sortable prop="avail" label="数量" width="180"></el-table-column>
        <el-table-column sortable prop="totalPrice" label="总价" width="180"></el-table-column>
      </el-table>
      <div style="padding:auto 10em;overflow-x:auto">
      <Pagination style="" v-show="myBagTotal > 0" :total="myBagTotal" v-model:page="listQuery.page"
                  v-model:limit="listQuery.limit" @pagination="myBag" />
      </div>
    </el-dialog>
  </div>
</template>

<style lang='scss' scoped>
:deep(.drawerDialog) {
  .el-col {
    margin-bottom: 10px;
  }
}
</style>
